<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!--<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"/>-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="web description is me">
    <meta name="author" content="wangqinmin">
    <link rel="icon" href="../img/icon/B.ico">
    <title>bootstrap列表与代码样式</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7/css/bootstrap.css"/>
    <link rel="stylesheet" href="../bootstrap-3.3.7/css/bootstrap-theme.css"/>
    <link href="../css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <link href="../css/starter-template.css" rel="stylesheet">
    <script type="text/javascript" src="../jquery-3.3.1/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../bootstrap-3.3.7/js/bootstrap.js"></script>

    <style>
        div {
            border: 1px #c9302c solid;
        }
    </style>
</head>
<!-- 列表与代码样式 -->
<body>
<!-- container：作用相当于一个自动居中的容器(用的地方很多，不然样式可能难看) -->
<!-- 列表与代码样式 -->
<div class="container">
    无序列表
    <ul>
        <li>中国</li>
        <li>印度</li>
        <li>加拿大</li>
    </ul>
    有序列表
    <ol>
        <li>中国</li>
        <li>印度</li>
        <li>加拿大</li>
    </ol>
    去点列表 .list-unstyled ul与ol标签都可以
    <ul class="list-unstyled">
        <li>中国</li>
        <li>印度</li>
        <li>加拿大</li>
    </ul>
    内联列表：list-inline 水平排列做菜单
    <ol class="list-inline">
        <li><a href="#">中国</a></li>
        <li><a href="#">中国</a></li>
        <li><a href="#">印度</a></li>
        <li><a href="#">加拿大</a></li>
    </ol>

    dl列表
    <dl>
        <dt>java</dt>
        <dd>java是一门面向对象编程的语言</dd>
        <dt>java</dt>
        <dd>java是一门面向对象编程的语言</dd>
        <dt>java</dt>
        <dd>java是一门面向对象编程的语言</dd>
        <dt>java</dt>
        <dd>java是一门面向对象编程的语言</dd>
    </dl>

    dl列表 ,dl-horizontal属性，则'dt与dd'水平显示
    <dl class="dl-horizontal">
        <dt>java</dt>
        <dd>java是一门面向对象编程的语言</dd>
        <dt>java</dt>
        <dd>java是一门面向对象编程的语言</dd>
        <dt>java</dt>
        <dd>java是一门面向对象编程的语言</dd>
        <dt>java</dt>
        <dd>java是一门面向对象编程的语言</dd>
    </dl>
    <hr/>
    代码,后面的code,kbd,pre,var,samp 都是html5d的标签:<br/>
    "code标签 显示单行内联代码"<br/>
    <code>code标签 显示单行内联代码:
        public static void main (string[] args){}
    </code>
    <br/>
    <br/>
    "kbd标签 显示用户输入代码,其实就是一个效果图，看着更加清晰"<br/>
    <kbd>
        打开：<a href="http://www.baidu.com" style="color: #2aabd2">http://www.baidu.com</a>
    </kbd>就可以搜索了。
    <br/>
    <br/>
    "pre标签 多行代码块,保存格式的元素性"<br/>
    <pre>
        public static void main (string[] args){
            int i = 10;
            System.out.println("代码格式不变,可是数据库传什么数据过来呢？换行符自动打印？");
        }
    </pre>
    <br/>

    "var标签 变量"<br/>
    <var>其中的int i 就是变量</var>
    <br/>
    <br/>

    "samp标签 程序结果"<br/>
    程序结果为：<samp>代码格式不变,可是数据库传什么数据过来呢？换行符自动打印？</samp>
    <br/>
    <br/>

        <hr/>
        <hr/>
        <hr/>

</div>

</body>
</html>